
<div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <select name="chose_time" >
                    <option value="0">自定义查询时间</option>
                    <option value="1">1天</option>
                    <option value="7">7天</option>
                    <option value="15">15天</option>
                    <option value="30">30天</option>
                  </select>
                </div>
              </div>
            <div class="layui-inline" >
              <div class="layui-input-inline" style="width: 300px">
                <select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >
                </select>
              </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">查询</a>
            </div>
        </div>
    </form>
</div>
<!-- 健康数据表格开始 -->
<table class="layui-table" id="report_table" lay-filter="report_table"></table>
<script type="text/html" id="report_bar">
    <a class="layui-btn layui-btn-xs " lay-event="show_health_detail">图表展示</a>
</script>
<!-- 健康数据表格结束 -->
<!-- e_chart部分开始 -->
<div class="layui-coutainer" style="display:none" id="echarts_div">
 <div class="layui-row" >
  <!-- 雷达图开始 -->
  <div class="layui-col-lg6">
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">健康数据雷达图</div> -->
          <div class="layui-card-body" style="text-align: center;">
             <div  id="radar_chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div class="layui-col-lg6" >
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">健康数据雷达图</div> -->
          <div class="layui-card-body">
             <div  id="pie_chart" ></div>
          </div>
        </div>
      </div>
  </div>
  </div>
  </div>
  <!-- 曲线图 -->
  <div class="layui-row ">
    <div class="layui-col-md12" >
      <div class="layui-card">
        <!-- <div class="layui-card-header">健康数据详情</div> -->
        <div class="layui-card-body">
           <div  id="report_data_detail" style="width:100%;height:250px"></div>
        </div>
      </div>
    </div>
  </div>

</div>
<!-- e_chart部分结束 -->
<!-- js代码开始 -->
<!-- 引用echart插件 -->
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
$('.layui-body').attr('style','padding:10px;bottom:0px;left:0px') 
$('.layui-side').hide()
form.render()
// 图标的宽度和高度的适应屏幕处理
var radar_chart_width=get_width/3
var radar_chart_height=get_height/2.6
$('#radar_chart').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
$('#pie_chart').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
$('#person_base_info').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
var report_data_detail_height=get_height-radar_chart_height-100
var report_data_detail_width=get_width/1.1
$('#report_data_detail').attr('style','height:'+report_data_detail_height+'px;width:'+report_data_detail_width+'px;')

var ajax_url='device_report'
// 默认加载设备数据表格渲染函数
var table_show=function(table_data){
  console.log(table_data)

  table.render({
    elem: '#report_table',
    data: table_data,
    toolbar: true,
    title:'设备运行数据',
    id:'device_table',
    cols: [
    [   {field: 'user_name', title: '名称',sort:true,templet:function(d){
          var dev_detail=get_detail_from_id(device,d.device_id)
          var user_name=dev_detail.user_name
          return user_name
        }},
        {field: 'device_id', title: '设备ID',sort:true},
        {field: 'online', title: '在线时长',sort:true,templet:function(d){
          return d.online+'小时'
        }},
        {field: 'stop_time', title: '静止时长',sort:true,templet:function(d){
          return d.stop_time+'小时'
        }},
        {field: 'active_time', title: '活跃时长',sort:true,templet:function(d){
          return d.active_time+'小时'
        }},
        {field: 'analysis_time', title: '统计时间段',sort:true},
        {title: '操作',templet: '#report_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// 数据加载

var handle_get_func=function(data){
  table_show(data)
  // show_chart(data)
}

get_info_ajax(ajax_url,'get_init_data',handle_get_func)

table.on('tool(report_table)',function(obj){
  console.log(obj)
  layer.open({
        type: 1
        ,title:'健康数据展示:'
        ,area:['100%','100%'] 
        ,offset:'60px'
        ,id: 'health_reports_chart' //防止重复弹出
        ,content:$('#echarts_div')
        ,shade: 0
        // ,zIndex:999
        ,success:function(layero){
          show_chart(obj.data)
        }
  })
  
})

// 图标展示功能函数

var show_chart=function(device_data){
  // 左边雷达图
  var radar_value=[]
  radar_value.push(device_data['online'])
  radar_value.push(device_data['offline'])
  radar_value.push(device_data['active_time'])
  radar_value.push(device_data['stop_time'])
  radar_value.push(device_data['mileage'])
  radar_value.push(device_data['speed'])

  radar_name_list=['在线','离线','活跃','静止','里程','速度']
  console.log(radar_value)
  // 基于准备好的dom，初始化echarts实例
  var radar_chart = echarts.init(document.getElementById('radar_chart'));

  var query_time=device_data['query_time']
  // 指定图表的配置项和数据
  var option = {
      tooltip: {trigger: 'item',},   
      legend: {formatter:function(name){return name},left:10,},
      radar: [{indicator: [
                  { name: '在线', max: query_time },
                  { name: '离线', max: query_time },
                  { name: '活跃', max: query_time },
                  { name: '静止', max: query_time },
                  { name: '里程', max: query_time*180 },
                  { name: '速度', max: 180 }
              ],
              center: ['70%', '50%'],
              radius: 90
          }
      ],
      series: [{name: '设备运行数据',type: 'radar',areaStyle: {},data: [{value: radar_value,name:'设备运行数据雷达图'}]}]
  }
  radar_chart.setOption(option);

  // 右边饼状图
  var pie_chart = echarts.init(document.getElementById('pie_chart'));

  // 指定图表的配置项和数据
  var pie_option = {
    // title: {
    // text: '某站点用户访问来源',
    // subtext: '纯属虚构',
    // left: 'center'
    // },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['在线','离线','活跃','静止']
    },
    series: [
        {
            name: '占比',
            type: 'pie',
            radius: '65%',
            center: ['60%', '50%'],

            data: [
                {value: device_data.online, name: '在线',attch:'online'},
                {value: device_data.offline, name: '离线',attch:'offline'},
                {value: device_data.active_time, name: '活跃',attch:'active_time'},
                {value: device_data.stop_time, name: '静止',attch:'stop_time'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }
  pie_chart.setOption(pie_option);

  // ---底部的曲线图----//
  var show_field=['sex','name','picture','department','worknumber','job','phone','character']
  var show_field_dict={'sex':'性别','name':'姓名','picture':'照片','department':'部门','worknumber':'编号','job':'职位','character':'编制','phone':'电话'}
  var input
  option1 = {
      title: {text: '健康数据详情'},
      tooltip: {trigger: 'axis'},
      legend: {
          data:['在线','离线','活跃','静止','里程','速度'],
          selected:{'在线':false,'离线':false,'活跃':false,'静止':false,'里程':false,'速度':false}
      },
      toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'},dataView: {readOnly: false},magicType: {type: ['line', 'bar']},restore: {},saveAsImage: {}}},
      xAxis:  {type: 'category',boundaryGap: false,data: []},
      yAxis: {type: 'value',},
      series: [
          {name:'在线',type:'line',data:[],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},
          {name:'离线',type:'line',data:[],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},
          {name:'活跃',type:'line',data:[],markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},
          {name:'静止',type:'line',data:[],markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          },
          {name:'里程',type:'line',data:[],markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          },
          {name:'速度',type:'line',data:[],markPoint: {
                  data: [
                      {type: 'max', name: '最大值'},
                      {type: 'min', name: '最小值'}
                  ]
              },
              markLine: {
                  data: [
                      {type: 'average', name: '平均值'}
                  ]
              }
          }
      ]

  };

  var detail_chart = echarts.init(document.getElementById('report_data_detail'),{
      width: 'auto',
      height: report_data_detail_height-150
  });


  option1['series'][5]['data']=device_data['speed_yAxis']
  option1['xAxis']['data']=device_data['speed_xAxis']
  option1['title']['text']='速度'
  option1['legend']['selected']['速度']=true
  detail_chart.setOption(option1) 

  detail_chart.on('legendselectchanged', function (params) {
    // console.log(params['name']);
    report_data_detail_dict={'在线':['online_xAxis','online_yAxis'],
                             '离线':['offline_xAxis','offline_yAxis'],
                             '活跃':['active_xAxis','active_yAxis'],
                             '静止':['stop_xAxis','stop_yAxis'],
                             '里程':['mileage_xAxis','mileage_yAxis'],
                             '速度':['speed_xAxis','speed_yAxis']}
      
    var key_xaxis=report_data_detail_dict[params['name']][0]
    var key_yaxis=report_data_detail_dict[params['name']][1]

    option1['xAxis']['data']=device_data[key_xaxis]
    for(var i=0;i<option1['series'].length;i++){
      if(option1['series'][i]['name']==params['name']){
        option1['series'][i]['data']=device_data[key_yaxis]
        // option1['legend']['selected'][params['name']]=true
        for(var k in option1['legend']['selected']){
          if(k==params['name']){
            option1['legend']['selected'][params['name']]=true
          }else{
            option1['legend']['selected'][k]=false
          }
        }
        option1['title']['text']=params['name']
      }
    }
    detail_chart.setOption(option1) 
  });

  detail_chart.setOption(option1)

}
    
// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {
  var search_key = data.field;
  var s_time=search_key['s_time'];
  var e_time=search_key['e_time'];
  // console.log(formSelects.value('select', 'val'))
  query_param={'hard_id':formSelects.value('select', 'val'),'s_time':s_time,'e_time':e_time,'chose_time':search_key['chose_time']}
  post_info_ajax(query_param,ajax_url,'query_report',table_show)
  // post_info_ajax(query_param,'table')
  return false;
});


//添加选择设备列表
fill_raido_func(device,'chose_device','user_name','device_id')
formSelects.render()


// 时间选择框渲染
laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});

</script>